<template>
  <div class="carModelConfigFile">
    <h4 class="withVerticleLineT4 title14">{{ $t('configFile') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('recentSyncTime') }}</a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            :text="$commonFun.getDateTimeStr(info.lastestTime) || '-'"
          ></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :md="10" :sm="14">{{ $t('firstNoticeTime') }}</a-col>
        <a-col :md="14" :sm="10" class="result">
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            :text="$commonFun.getDateTimeStr(info.firstTime) || '-'"
          ></table-ellipsis>
        </a-col>
      </a-row>
      <a-row class="baseInfoItem">
        <a-col :span="24">
          <auth-button
            :auth="statisticsPerms.vehicle.downConfigFile"
            :loading="downing"
            :disabled="!info.id"
            @click="download(info)"
            style="width: 100%"
          >
            {{ $t('downConfigFile') }}
          </auth-button>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import vehicleApi from '@/api/modules/system/vehicleMana'
import { mapGetters } from 'vuex'
import { downloadBlobFile } from '@/utils/functions'
import { managePerms } from '@/config/permission/index'
import { statisticsPerms } from '@/config/permission/index'

import AuthButton from '@/components/AuthButton'
const initInfo = {
  id: '',
  lastestTime: '',
  firstTime: ''
}
export default {
  components: {
    TableEllipsis,
    FullParentDomWithDask,
    AuthButton
  },
  props: {
    vin: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      managePerms,
      statisticsPerms,
      loading: false,
      info: {
        ...initInfo
      },
      downing: false
    }
  },
  computed: {
    ...mapGetters(['drawerOpenTime'])
  },
  watch: {
    drawerOpenTime: {
      handler () {
        this.getConfigData()
      },
      immediate: true
    }
  },
  methods: {
    getConfigData () {
      this.info = { ...initInfo }
      this.loading = true
      vehicleApi
        .getVehicleConfigData({ vin: this.vin })
        .then((res) => {
          if (!res.data.id) {
            return
          }
          this.info = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    download (record) {
      this.downing = true
      vehicleApi
        .downVehicleConfigFile({ id: record.id })
        .then((res) => {
          downloadBlobFile(res, this.$t('configFile') + '.json')
        })
        .finally(() => {
          this.downing = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.carModelConfigFile {
  margin-bottom: 20px;
  border-bottom: 1px solid @borderColor;
  padding-bottom: 15px;

  .baseInfoItems {
    position: relative;
  }

  .baseInfoItem {
    margin-top: 15px;

    .result {
      text-align: right;
    }
  }
}
</style>
<style lang="less">
.carModelConfigFile {
  .disabledAuthButtonWrap {
    .ant-btn {
      width: 100%;
    }
  }
}
</style>
